<template>
  <!-- 在线预览 -->
  <el-dialog class="viewDoc" :title="title" :visible.sync="isOpen"
    :width="width" :close-on-click-modal="false" @close="close"
    @open="openHandle">
    <div ref="iframe" style="height:75vh" v-if="isOpen">
      <iframe :src="micUrl" @load="loadHandle"
        frameborder="0" width="100%" height="100%"></iframe>
      <!-- <pdf v-else-if="type==2" :src="pdfUrl" @@progress="pdfProgress"></pdf> -->
    </div>
  </el-dialog>
</template>
<script>
import { Dialog as ElDialog, Loading } from 'element-ui'
// import pdf from 'vue-pdf'
export default {
  name: 'onlineWord',
  props: {
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '在线 阅读文档'
    },
    width: {
      type: String,
      default: '95%'
    },
    src: String, // 文件地址
    msrc: { // 微软在线办公地址
      type: String,
      default: 'http://view.officeapps.live.com/op/view.aspx?src='
    },
    type: { // 类型 1 微软在线 2 第三方插件
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      loadingObj: null
    }
  },
  computed: {
    isOpen: {
      get() { return this.open },
      set(val) {
        this.$emit('update:open', val)
      }
    },
    micUrl() { // 微软地址
      return this.type == 1 ? this.msrc + encodeURIComponent(this.src) : this.src
    }
    // pdfUrl() {
    //   // 跨越处理
    //   return pdf.createLoadingTask(this.src)
    // }
  },
  components: { ElDialog },
  created() {
  },
  methods: {
    loadingStart() {
      this.$nextTick(() => {
        this.loadingObj = Loading.service({
          target: this.$refs.iframe,
          text: '文档加载中...',
          lock: true
        })
      })
    },
    close() {
      this.$emit('close')
    },
    // 打开窗口
    openHandle() {
      const domDialog = this.$refs.dialog.$el.querySelector('.el-dialog')
      domDialog.style.top = 0
      domDialog.style.left = 0
      domDialog.style.marginBottom = 0
    },
    loadHandle() { // 加载
      this.$nextTick(() => {
        this.loadingObj.close()
      })
    },
    pdfProgress(num) {
      // console.log('加载进度', num)
      if (num == 1) {
        this.loadingObj.close()
      }
    }
  },
  filters: {
  },
  watch: {
    open(newVal) {
      if (newVal) {
        this.loadingStart()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .viewDoc{
//   ::v-deep .el-dialog{
//     margin: 5vh auto 0 !important;
//     transform: none !important;
//   }
// }
</style>
